چگونه خودمان طراحی وب‌سایت را آغاز کنیم؟ (آموزش کامل)
توسط: فرشاد گوهریدر: ۰۲ مهر ۱۳۹۷در: اینترنت و وب184 دیدگاه
شاید شما که در حال مطالعه‌ی این مقاله هستید از دسته افرادی باشید که به طراحی وبسایت علاقه‌مند بوده و همنشین دارید بدانید یک وبسایت چگونه برپایی می‌شود، همانطور که می‌دانید هزینه‌ی طراحی یک سایت خوب بسیار بالاست اما اگر خودتان مراحل برپایی یک وبسایت را بدانید می‌توانید به مد نظر خود سایت باره نظرتان را راه‌اندازی کرده و شروع به کسب درآمد از آن کنید.

امروزه در مملکت ما نیز بازرگانی الکترونیک به صورت جدی‌تر تعقیب می‌شود و کسان زیادی علاقه‌مندند کسب‌و‌کار خود را به صورت آنلاین راه‌اندازی کنند، به جرئت می‌توان گفت نخستین قدم برای آغاز بازرگانی الکترونیک واقعی، داشتن یک وبسایت است.

در این تعلیم از همیار آی‌تی هدف نداریم روش‌های برنامه‌نویسی را بیاموزیم و وارد مباحث تخصصی یا فنی شویم، بلکه می‌خواهیم راه و روش طراحی یک وبسایت را از دید کلی باهم بررسی کرده و یک الگوی ذهنی از این پیشه به شما ارائه دهیم، بعد از مطالعه‌ی این تعلیم می‌توانید گذرگاه خویش را یافته و به دنبال یادگیری تخصص‌های باره احتیاج برای راه‌اندازی یک وبسایت بروید.

قبل از اینکه به سراغ بحث اصلی‌مان برویم، بیایید در آغاز کمی با تاریخچه‌ی اولین وبسایت‌ها آشنا شویم و ببینیم نیاکان وبسایت‌های معاصر به چه شکلی بوده‌اند.

تاریخچه‌ی اولین وبسایت جهان
تکنولوژی اینترنت و وبسایت‌های اینترنتی عمر چندانی ندارند، اولین صفحه‌ی وب عالم در سنه ۱۹۹۱ بدست تیم برنرز لی (Tim Berners-Lee) برپایی و در دسترس عموم پیمان گرفت، این وبسایت بسیار ساده بود و فقط از چند متن و چندین لینک ساخته شده بود، جالب است بدانید این صفحه هنوز هم در این آدرس در دسترس است!

تیم برنرز لی، خالق وب
تصویری از تیم برنرز لی خالق شبکه‌ی جهانی وب!
حال که کمی با تاریخچه‌ی وب و نحوه‌ی شکل‌گیری نخستین وبسایت‌ها آشنا شدیم وقت آن است که وارد جزئیات اصلی شده و ببینیم چگونه می‌توان یک وبسایت ایجاد کرد.

مهم‌ترین پیش‌نیاز ورود به دنیای طراحی سایت و برنامه‌نویسی آشنایی نسبتا خوب با زبان انگلیسی است، چرا که بسیاری از منابع عالی به خصوص در زمینه‌ی آی‌تی و فناوری به زبان انگلیسی در دسترس بوده و شما با دریافتن زبان انگلیسی می‌توانید قبل از هرکس دیگری از این منابع با کیفیت بهره‌مند شوید، پس در نخستین قدم کوشش کنید زبان انگلیسی خویش را تقویت کنید!

طراحی وبسایت را از کجا آغاز کنیم؟
هرچند در گذشته با سایت‌های کاملا ساده و یکنواختی روبرو بودیم، اما امروزه به لطف تکنولوژی‌های طراحی وب (که در پیوستگی با آن‌ها آشنا می‌شویم) صفحات وب زیبایی خیره‌کننده‌ای داشته و کاربر می‌تواند به راحتی با آن‌ها به تعامل بپردازد.

سایت‌های امروزین از دو قسمت فرانت‌اند (Front end) و بک‌اند (Back end) تشکیل شده‌اند، بخشی از وبسایت که بدست کاربر قابل مشاهده بوده و در مرورگر او نمایش داده می‌شود فرانت‌اند نام داشته و بخشی که مربوط به پردازش‌های سمت سرور می‌شود را بک‌اند می‌نامند.

مرحله‌ی ۱
یادگیری HTML

قسمت ظاهری یک وبسایت یا همان فرانت‌اند، با استفاده از زبان نشانه‌گذاری HTML برپایی می‌شود، طراحی سایت در واقعیت اچ تی ام ال مشابه اسکلت و چهارچوب‌های یک وبسایت عمل می‌کند، فرقی نمی‌کند برنامه‌نویسی سمت سرور را با چه زبانی سپریدن دهید، شما در هر چهره باید آشنایی نسبتا کاملی با زبان HTML داشته باشید، بدون هستی اچ تی ام ال هیچ وبسایتی وجود نخواهد داشت!

در خصوص یادگیری این زبان نگرانی نداشته باشید، چراکه اگر واقعا تلاش کنید چیزی در حدود ۱ هفته سررسید می‌برد الی با اصول کلی این زبان آشنا شده و بتوانید اولین صفحه‌ی وب خویش را برپایی کنید، ما پیشتر در همیار آی‌تی مبانی آغاز پیشه با این زبان را تعلیم داده‌ایم، می‌توانید برای شروع یادگیری این زبان به تعلیم مبانی HTML مراجعه نمایید.

مرحله‌ی ۲
یادگیری CSS

هرچند HTML بسیار مهم است اما به تنهایی نمی‌تواند نما زیبایی به وبسایت بدهد و در نهایت تنها امکان برپایی سایتی مشابه اولین صفحه‌ی وب تاریخ را خواهد داشت، برای زیباسازی صفحات وب از تکنولوژی CSS کاربرد می‌کنیم، اگر دوست دارید با این زبان آشنا شوید، می‌توانید به تعلیم مقدماتی زبان CSS مراجعه کنید.

زبان سی‌اس‌اس کمی پیچیده‌تر است اما یادگیری آن‌هم نسبتا ساده خواهد بود، چرا که وقتی اولین کدهای خود را بنویسید و ببینید چگونه می‌تواند به قشنگ شدن نما وبسایتتان کمک کند مطمئنا با علاقه و انگیزه‌ی اکثریت آن را دنبال خواهید کرد،‌ یادگیری این قسمت نیز چیزی حدود ۱ الی ۲ هفته زمان خواهد برد.

مرحله‌ی ۳
یادگیری JavaScript

تا به اینجای شغل شما با دسته مهمی از عناصر تشکیل‌دهنده‌ی صفحات وب آشنا شده‌اید و می‌توانید با استفاده از نزاکت خویش صفحات نسبتا خوبی طراحی کنید یا صفحات وبلاگتان را به مد نظر خویش ویرایش و شخصی‌سازی کنید، ولی اگر می‌خواهید امکانات اکثریت همانند انیمیشن‌‌های مختلف، تاریخ و ساعت، اسلایدر و… به سایت خود اضافه کنید لازم است تا به سراغ یادگیری زبانی به نام JavaScript بروید، در صورت علاقه به این زبان می‌توانید تعلیم مفاهیم جاوا اسکریپت را مطالعه نمایید.

برخلاف HTML و CSS که زبان‌های نشانه‌گذاری بودند، جاوا اسکریپت یک زبان برنامه‌نویسی (اسکریپت‌نویسی) است و یادگیری آن مقداری زمان‌بر خواهد بود.

HTML , CSS, JS
هم‌اکنون شما با نحوه‌ی ایجاد ساختار ظاهری سایت (فرانت‌اند) آشنا شدید، حال می‌توانید یک طرح کلی از ایده‌ای که در راز دارید را پیاده‌سازی و اجرا کنید، اما بیایید در پیوسته کمی اغلب با افزارها و تکنولوژی‌های مورد بهره‌گیری در طراحی فرانت‌اند سایت آشنا شده و ببینیم طراحان حرفه‌ای چگونه نما سایت را آماده می‌کنند، پیش از آن لازم است با چند اصطلاح آشنا شویم.

فریم‌ورک (Framework) چیست؟
فریم‌ورک (Framework) یا “چهارچوب” در اصطلاح مجموعه‌ای حاضر از کلاس‌ها، کدها و توابع برنامه‌نویسی است که در قالب یک پکیج ارائه می‌شود و در طراحی پروژه‌های نرم‌افزاری به کمک برنامه‌نویسان می‌آید.

در حقیقت هنگامی که شما از فریم‌ورک‌ها بهره‌گیری می‌کنید کدها از پیش نوشته‌شده و آماده هستند و فقط کافیست طبق قوانین خاصی (دایکیومنت‌های آن فریم‌ورک) کدها را در کناره هم پیمان دیتا و از آن‌ها بهره‌گیری کنید.

معمولا در روند طراحی پروژه‌هایی در سطح استاندارد برای افزایش سرعت و بهبود عملکرد کار از فریم‌ورک‌ها کاربرد می‌کنیم، از معروف‌ترین فریم‌ورک‌های مربوط به HTML و CSS می‌توان به بوت‌استرپ (Bootstrap) اشاره کرد.

فریم‌ورک بوت‌استرپ
با استفاه از فریم‌ورک‌های آماده می‌توانید به سرعت کدهای خود را توسعه داده و یک صفحه‌ی وب را ایجاد کنید، جالب است بدانید افراد حرفه‌ای تنها در چند ساعت نما کلی یک سایت را با به کارگیری فریم‌ورک‌های موجود طراحی و پیاده‌سازی می‌کنند!

اکیدا به شما توصیه می‌کنیم اگر تازه‌کار هستید به هیچ‌وجه سمت استفاده از فریم‌ورک‌های حاضر نروید، چراکه برای استفاده از آن‌ها نیز باید در آغاز با اصول کلی شغل آشنا باشید، به کارگیری فریم‌ورک‌ها در ابتدای فرمایش نه‌تنها باعث سردرگمی اغلب شما خواهد شد بلکه راهبند از یادگیری صحیح‌تان نیز می‌شود، پس از اینکه اصول کلی پیشه با HTML و CSS را فرا گرفتید می‌توانید به سراغ یادگیری یک فریم‌ورک رفته و در آن مهارت پیدا کنید.

البته اگر منظور ایجاد یک سایت منحصربه‌فرد را دارید به کارگیری فریم‌ورک‌ها چندان توصیه نمی‌شود، چراکه افراد زیادی از آن‌ها استفاده می‌کنند و همین موضوع باعث ایجاد سایت‌هایی با نما یکنواخت و تکراری در فضای وب شده است.

کتابخانه (Library) چیست؟
به زبان ساده مفهوم کتابخانه نیز الی حدودی همانند به فریم‌ورک است. (چندین کتابخانه در ساحل هم می‌توانند یک فریم‌ورک را برپایی کنند)

در راستی کتابخانه‌های برنامه‌نویسی مجموعه‌ای از کلاس‌ها و توابع حاضر هستند که به چهره یکجا جمع شده و برنامه‌نویسان آن‌ها را باره بهره‌گیری پیمان می‌دهند، معروف‌ترین کتابخانه‌ی موجود برای جاوا اسکریپت jQuery نام دارد، شما می‌توانید با به کارگیری آن به توابع گوناگون و زیادی از JavaScript دسترسی داشته و آن‌ها را در وبسایت خویش استفاده کنید.

به طور کلی فریم‌ورک‌ها و کتابخانه‌های مختلف به وجود آمدند لغایت فرایند طراحی و برنامه‌نویسی را بهبود بخشیده و سرعت پیشه را افزایش دهند، هرچند همانطور که پیش‌تر گفتیم شما باید کوشش کنید در ابتدا الی حدودی با مفاهیم کلی طراحی وب آشنا شده و سپس به استفاده از این موارد بپردازید.

تا به اینجای کار نزدیک با تمام اصول کلی طراحی فرانت‌اند یک وبسایت آشنا شدیم، با احساس موارد گفته شده در بالا شما کم و بیش قادر به طراحی هر نوع وبسایت استاتیکی خواهید بود، اگر دقت کرده باشید از کلمه‌ی استاتیک بهره‌گیری کردیم، دسته‌بندی دیگری که می‌توان برای یک وبسایت در عقیده گرفت استاتیک و داینامیک بودن آن است.